<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#d1{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
			}
		</style>
	</head>
	<body>
		<input type="radio" name="color" value="1" />红色
		<input type="radio" name="color" value="2" />黄色
		<input type="radio" name="color" value="3" />绿色
		<div id="d1">
			
		</div>
		<button type="button">选择</button>
		<select id="sex" >
			<option>男</option>
			<option>女</option>
		</select>
		<script type="text/javascript">
			//点击不同颜色，改变div的背景色
			$(function(){
				$("#d1").css("background-color","#0000FF");//改变div的背景色
				//按钮div等所有元素都可以添加点击事件click
				//对复选框、单选框还有select，input输入框。一般会使用change事件
				//获取所有radio
				// $("input[type='radio']");
				//获取所有name=color的radio
				// $("input[type='color']");
				//添加点击事件
				$("input[name='color']").change(function(a,b,c){
					let val = $(this).val();
					//要求类型和值一样
					//1是字符串类型
					//"1"才是value的数字类型

					if(val === "1"){
						$("#d1").css("background-color","red");
					}else if(val === "2"){
						$("#d1").css("background-color","yellow");
					}else{
						$("#d1").css("background-color","green");
					}
				});
				$("button").onclick(function(){
					console.log($("select option:selected").val());
					console.log($("select option:selected").text());
				})
			})
		</script>
	</body>
</html>
